<template>
	<view>
		<view class="content_user">
			<view class="content_user_left">
				<up-avatar size="60rpx" :src="order.server.avatar"></up-avatar>
				<view class="u_info">
					<view style="margin-bottom: 10rpx;">
						{{order.server.nickname}}
						<text style="font-size: 30rpx;color: #999;">{{order.server.workAt}}年经验</text>
					</view>
					<view class="flex">
						<up-rate count="5" v-model="order.server.marks" active-color="#facd16" readonly></up-rate>
					</view>
				</view>
			</view>
			<view class="content_user_right">
				<view class="icon_bt"><up-icon color="#18dd14" name="chat"></up-icon></view>
				<view class="icon_bt"><up-icon color="#18dd14" name="phone"></up-icon></view>
			</view>
		</view>
		<view class="content_user" style="margin-top: 20rpx;padding-top: 10rpx;">
			<view class="content_user_left">
				<up-image lazy-load width="80rpx" height="80rpx" radius="10rpx"
					:src="order.serviceSnapshot.icon??'/static/f/007.gif'" mode="aspectFill"></up-image>

				<view class="s_cont">
					<up-text size="28rpx" :text="order.serviceSnapshot.serviceName"></up-text>
					<up-text type="info" size="26rpx" :text="order.serviceSnapshot.serviceTime"></up-text>

				</view>
			</view>
			<view class="content_user_right">
				<view class="s_txt">
					<up-text mode="price" type="info" align="right" :text="order.money"></up-text>
					<up-text prefixIcon="x" type="info" align="right" :text="order.buyCount"></up-text>
				</view>
			</view>
		</view>

		<view class="content_qrcode" v-for="item in qrCodeList" :key="item.qr">
			<view v-if="item.status==0">
				<view class="text" :class="order.used!=1?'':'used'"> 消费码:<text>{{item.qr}}</text></view>
				<up-qrcode :size="100" :val="item.qr"></up-qrcode>
			</view>
			<view v-else>
				<image class="qrcode" style="height: 200rpx;" src="/static/used.png"></image>

				<up-text type="info" align="center" :text="`消费时间：${item.checkAt}`"></up-text>
			</view>


		</view>
		<view class="content">
			<view class="content1">
				<text>实付金额</text>
				<text>{{order.money}}元</text>
			</view>
			<view class="content2">
				<view>
					<text>订单号：</text>
					<text>{{order.orderNo}}</text>
				</view>
				<view>
					<text>预约时间：</text>
					<text>{{order.serviceStartAt}}</text>
				</view>
				<view>
					<text>服务类型：</text>
					<text>{{order.serviceSnapshot.serviceName}}</text>
				</view>
				<view>
					<text>下单时间：</text>
					<text>{{order.createdAt}}</text>
				</view>
				<view>
					<text>支付时间：</text>
					<text>{{order.payAt}}</text>
				</view>
				<view>
					<text>消费时间：</text>
					<text>{{order.yuyueTime}}</text>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="content1" style="padding-left: 20rpx;">
				消费码使用须知
			</view>
			<view class="content2">
				<view>
					1.消费吗一但使用后，不能退款，过去用自退
				</view>
				<view>
					2.消费码不能进行兑换、出售、转让或其他用途
				</view>
			</view>
		</view>
		<view class="footer hcenter">
			<view class="flex wcenter button consult" style="">
				<image src="/static/f/tousu.png"></image>
				<view>
					客服
				</view>
			</view>
			<view class="flex hcenter wcenter button " @click="ontoushu">
				<image src="/static/f/tousu.png"></image>
				<view style="">投诉</view>
			</view>
		</view>
		<view class="containerBottom"></view>
	</view>
</template>

<script>
	import {
		repayOrderApi,
		orderDetialApi,
		orderQrcodeApi,
	} from '@/api/order.js'

	import {
		onLoad,
		onShow,
		onUnload,
	} from '@dcloudio/uni-app'
	import {
		reactive,
		toRefs,
	} from 'vue';
	import basUrl from "@/config/config.js"
	import {
		goBack
	} from '@/utils/utils.js'
	export default {
		setup() {

			const state = reactive({
				order: {
					money: "0",
					ordrNumber: 'E1256879',
					create_time: '2024-06-24 16:14:00',
					img: '',
					type: 0, //0是卖出的东西，1是网约车订单
					pice: 600,
					status: 1, //0是待完成，1已完成，2退款
					nickName: '李**',
					tel: '19923274584',
					title: '线上服务25元/小时',
					desp: '9月19日 14:00，9:00',
					desp1: '周六到店里提车',
					yuyueTime: '2024-06-24 16:14:00',
					serviceSnapshot: {},
					server: {},
				},
				intervalId: null,
				orderNo: "",
				qrCodeList: [],
			})
			onLoad(async (option) => {
				state.orderNo = option.orderNo
				await getData()
				getQrCode()

			})
			onShow(() => {
				startPolling();
			})
			onUnload(() => {
				stopPolling();
				
			})

			const startPolling = () => {
				state.intervalId = setInterval(getQrCode, 5000);
			}
			const stopPolling = () => {
				clearInterval(state.intervalId);
				state.intervalId = null;

			}

			const getData = async () => {
				const res = await orderDetialApi(state.orderNo)
				res.data.addressSnapshot = JSON.parse(res.data.addressSnapshot);
				res.data.serviceSnapshot = JSON.parse(res.data.serviceSnapshot);
				res.data.server.workAt = toage(res.data.workAt);
				res.data.server.avatar = basUrl.baseURL + res.data.server.avatar;
				state.order = res.data
			}

			function ontoushu() {
				uni.navigateTo({
					url: `/subpages/my/toushu?orderNo=${state.orderNo}&orderId=${state.order.id}`
				})
			}
			const toage = (birthday) => {
				if (birthday == null || birthday == '') return '--';
				try {
					var birthDate = new Date(birthday);
					var today = new Date();
					var age = today.getFullYear() - birthDate.getFullYear();

					// 检查是否已过今年的生日  
					var m = today.getMonth() - birthDate.getMonth();
					if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
						age--;
					}
					return age;
				} catch {
					return '--'
				}
			}
			const getQrCode = async () => {
				const {
					data
				} = await orderQrcodeApi(state.order.id)
				state.qrCodeList = data
			}

			function oncall() {
				uni.makePhoneCall({
					phoneNumber: state.order.server.mobile
				})
			}
			return {
				...toRefs(state),
				getData,
				ontoushu,
				oncall
			}
		}
	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style scoped lang="scss">
	.sr_title {
		width: 100%;
		height: 10vh;
		background-color: #38393E;
		position: relative;

		.sr_title1 {
			width: 100%;
			height: 40%;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;

			view:nth-child(1) {
				width: 40%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				image {
					width: 12%;
					height: 100%;
					margin: 0 5%;
				}
			}

			view:nth-child(2) {
				width: 60%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
	}

	.content_user {
		width: 670rpx;
		// height: 13vh;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 40rpx;
		padding-bottom: 40rpx;
		font-size: 36rpx;


		.content_user_left {
			width: 600rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.u_info {
				margin-left: 20rpx;
				font-size: 28rpx;

			}

			.s_cont {
				margin-left: 20rpx;
			}

		}

		.content_user_right {
			width: 150rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.s_txt {
				width: 100%;
			}

			.icon_bt {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				border: 1px solid #18dd14;
				color: #38393E;
			}


		}
	}

	.content {
		width: 100%;
		margin-top: 20rpx;
		font-size: 36rpx;

		.content1 {
			width: 100%;
			padding-top: 20rpx;
			font-weight: 500;
			// height: 5vh;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text:nth-child(1) {
				margin-left: 20rpx;
			}

			text:nth-child(2) {
				margin-right: 20rpx;
			}
		}

		.content2 {
			padding-top: 20rpx;
			padding-bottom: 5rpx;
			background-color: white;
			font-size: 30rpx;
			color: #B2B2B2;

			view {
				width: 100%;
				// height: 3vh;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-left: 20rpx;
				margin-bottom: 15rpx;
			}
		}
	}

	.content_qrcode {
		margin-top: 20rpx;
		padding-bottom: 30rpx;
		background-color: #fff;
		text-align: center;

		.text {
			font-size: 36rpx;
			font-weight: 500;
			padding-top: 30rpx;
			margin-bottom: 20rpx;
		}

		.used {
			color: #aaa;
			font-weight: 400;

			text {
				text-decoration: line-through;
			}
		}

		.qrcode {
			width: 300rpx;
			height: 300rpx;
		}
	}

	.containerBottom {
		height: 200rpx;
		line-height: 200rpx;
	}

	.footer {
		position: fixed;
		/* 固定定位 */
		bottom: 0;
		/* 底部对齐 */
		width: 100%;
		/* 宽度100% */
		display: flex;
		/* 使用Flex布局 */
		height: 100rpx;
		background-color: #ffffff;
		border-top: 1rpx solid #ddd;
	}

	.button {
		width: 50%;
		// flex: 1;
		/* 各占50%的宽度 */
		text-align: center;
		/* 文本居中 */
		// padding: 10px 0;
		/* 上下内边距 */
		font-size: 22rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-top: 5rpx;
			margin-right: 5rpx;
		}

	}

	.consult {
		border-right: 1px solid #aaa;
	}

	.appointment {
		font-size: 22rpx;
	}
</style>